<template>
  <div h-80 text-center flex flex-col align-middle select-none all:transition-400>
    <input type="checkbox" peer placeholder=">" class="<md:color-red" mt-a>
    <div mb-a group peer-checked="text-4xl">
      <div
        font-100 text-4xl mb--3 p-10
        bg-gradient="to-r from-yellow-400 via-red-500 to-pink-500"
        align-10px
      >
        ~
      </div>
      <div text-5xl font-100 sm="bg-blue-600" align-20%>
        unocss
      </div>
      <div op-20 font-200 mt-1 tracking-wider group-hover="text-teal-400 op-50" align-1rem>
        Re-imaging Atomic CSS
      </div>
    </div>
  </div>
  <div flex>
    <div ma inline-flex relative h-14>
      <input type="text" m-0 pt-4 px-4 text-true-gray-800 peer placeholder="unocss" un-placeholder="text-red" backdrop-element="filter">
      <label absolute leading-1rem left-4 pointer-events-none text-gray-7 top="1/3" transition="200 linear"
        peer-not-placeholder-shown="-translate-y-4 scale-75 origin-top-left text-green-500"
        peer-focus="-translate-y-4 scale-75 origin-top-left text-green-500"
        before-content="[quoted:!]"
        after="content-[string:!]"
      >Experience now</label>
    </div>
  </div>
</template>
